﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>事件处理</title>
</head>
<body>
    <div>
        <span>The following 2 images has a event bound.</span>
        <img id="img1" src="images/android.png" width="80" height="80" />
        <img id="img2" src="images/apple.png" width="80" height="80" />
    </div>
    <div>
        <span>You can click the following images only once.</span>
        <img id="img3" src="images/dotnet.png" width="80" height="80" />
        <img id="img4" src="images/cloud.png" width="80" height="80" />
    </div>
    <div>
        <p>
            Coordinates of click:<br />
            <span id="screenSpn"></span>
            <br />
            <span id="pageSpn"></span>
        </p>
        <img id="img5" src="images/java.png" width="80" height="80" />
    </div>
    <div>
        <p>Get char of key type:
        <br />
        <span id="spnKey"></span>
        </p>
        <input type="text" id="txt" />
    </div>
    <div>
        <p id="p1">
            Hover on the text to show something.
        </p>
    </div>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#img1").bind("click", null, function (event) {
                alert(event.target.id);
            });
            $("#img2").click(function (event) {
                alert(event.target.id);
            })
            // one表示该函数只执行一次
            $("#img3").one("click", function (event) {
                alert(event.target.id);
            });
            $("#img4").click(clickImage);
            $("#img5").click(getCoordinates);
            $('#txt').keypress(getKey);
            $('#p1').hover(hoverOver, hoverOut);
        });
        function clickImage(event) {
            alert(event.target.id);
            $(event.target).unbind("click", clickImage);
        }
        function getCoordinates(event) {
            $('#screenSpn').html("screen x:" + event.screenX + ", y:" + event.screenY);
            $('#pageSpn').html("page x:" + event.pageX + ", y:" + event.pageY);
        }
        function getKey(event) {
            $('#spnKey').text($('#spnKey').text() + String.fromCharCode(event.keyCode));
        }
        function hoverOver(event) {
            $('#p1').css("color", "blue");
        }
        function hoverOut(event) {
            $('#p1').css("color", "black");
        }
    </script>
</body>
</html>

